<script></script>
<template>
  <!-- 头部区域 -->
  <header>
    <div class="header w">
      <!-- 左侧导航模块 -->
      <ul>
        <li>
          <a href="#">小米商城</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">MIUI</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">IoT</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">云服务</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">天星数科</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">有品</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">小爱开放平台</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">企业团购</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">资质证照</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">协议规则</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">协议规则</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">下载App</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">Select Location</a>
          <span>|</span>
        </li>
      </ul>
      <!-- 右侧导航 -->
      <ul class="header-right">
        <li>
          <a href="#">登录</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">注册</a>
          <span>|</span>
        </li>
        <li>
          <a href="#">消息通知</a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont icon-gouwuchekong"></i>
            购物车 (0)
          </a>
        </li>
      </ul>
      
    </div>
  </header>
</template>

<style>
header {
  height: 40px;
  background-color: #333333;
}
.header ul li {
  float: left;
  height: 40px;
}
.header ul li a {
  display: inline-block;
  height: 100%;
  line-height: 40px;
  font-size: 12px;
  color: #ccc;
}
.header ul li span {
  font-size: 12px;
  padding: 0 6px;
  color: #424242;
}
.header ul li a:hover {
  color: #ffffff;
}
.header-right {
  float: right;
}
.header-right li:last-child a {
  padding: 0 20px;
  margin-left: 10px;
  background-color: #424242;
}
input {
  outline: none;
}
</style>